<template>
  <div class="site-nav">
    <div class="container">
      <!-- 左侧 -->
      <div class="left">
        <!-- 宣传标语 -->
        <span class="slogan">{{ $t("siteNavAdv") }}</span>
        <!-- 警告图标 -->
        <span class="alarm"></span>
        <!-- 滑动的广告 -->
        <ul class="adv" :style="{translateY: showAdvIndex * 36 + 'px'}">
          <li v-for="(adv, index) in advList" :key="index">
            <a :href="adv.link">{{ adv.title }}</a>
          </li>
        </ul>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <span class="item">{{ $t('login') }}</span>
        <span class="item">{{ $t('register') }}</span>
        <span class="line"></span>
        <span class="item" @click="toMyOrderListPageHandler()">{{ $t('myOrder') }}</span>
        <span class="line"></span>
        <span class="item">{{ $t('member') }}</span>
        <span class="line"></span>
        <span class="item">{{ $t('picker') }}</span>
        <span class="line"></span>
        <span class="item">{{ $t('enterpriseProcurement') }}</span>
        <span class="line"></span>
        <span class="item">
          {{ $t('customerService') }} <span class="iconfont icon-xiajiantou1"></span>
          <ul>
            <li>{{ $t('onlineService') }}</li>
            <li>{{ $t('helpCenter') }}</li>
            <li>{{ $t('businessCooperation') }}</li>
            <li>{{ $t('openPlatform') }}</li>
          </ul>
        </span>
        <span class="line"></span>
        <span class="item"><span class="iconfont icon-qr-code"></span> APP</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前展示的广告索引
      showAdvIndex: 0,
      // 广告列表
      advList: [
        { link: '/adv', title: '【严选x中行联名卡】达标领80元礼品卡>' },
        { link: '/adv1', title: '【福利】下载严选APP，抢1元包邮团，领...' },
        { link: '/adv2', title: '【严选x中行联名卡】达标领80元礼品卡>' }
      ]
    }
  },

  methods: {
    /**
     * 定时展示广告
     */
    setAdvShowByInterval () {
      // 创建定时器
      setInterval(() => {
        // 如果是最后一条，则不滑动了
        if (this.showAdvIndex === this.advList.length - 1) {
          return
        }
        // 如果不是最后一条则继续滑动
        this.showAdvIndex++
      }, 1000)
    },

    /**
     * 跳转到我的订单页面
     */
    toMyOrderListPageHandler () {
      this.$router.push('/order/list')
    }
  },

  /**
   * 组件被创建
   */
  created () {
    this.setAdvShowByInterval()
  }
}
</script>

<style lang="less" scoped>
@import "../styles/variable";
@import "../styles/common";

.site-nav {
  background: @font-color;
  height: 36px;
  line-height: 36px;
  .container {
    color: @font-color-light;
    height: 100%;
    .left {
      align-items: center;
      display: flex;
      float: left;
      height: 100%;
      overflow: hidden;
      .slogan {
        .transition;
        cursor: pointer;
        &:hover {
          color: @write;
        }
      }
      .alarm {
        background: url('../assets/alarm.gif') no-repeat center;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-left: 20px;
      }
      .adv {
        .transition;
        display: inline-block;
        height: 100%;
        list-style: none;
        padding-left: 12px;
        a {
          color: @font-color-golden;
          &:hover {
            .transition-fast;
            color: @write;
            text-decoration: none;
          }
        }
      }
    }
    .right {
      float: right;
      .item {
        cursor: pointer;
        display: inline-block;
        padding: 0 6px;
        position: relative;
        height: 100%;
        &:hover {
          .transition-fast;
          color: @write;
          ul {
            display: block;
          }
        }
        .iconfont {
          font-size: 12px;
        }
        ul {
          background: @write;
          box-shadow: 0px 2px 3px 1px @box-color-light;
          color: @font-color-grey;
          display: none;
          right: 0px;
          padding: 0px 10px;
          position: absolute;
          width: 80px;
          list-style: none;
          li {
            border-bottom: 1px solid @line-color-golden;
            text-align: center;
            &:hover {
              color: @font-color-golden;
            }
            &:last-child {
              border-bottom: 0px;
            }
          }
          &:after {
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid @write;
            content: " ";
            display: block;
            position: absolute;
            top: -6px;
            right: 36px;
          }
          &:hover {
            display: block;
          }
        }
      }
      .line {
        background: @line-color;
        display: inline-block;
        width: 1px;
        height: 16px;
        margin: -4px 0px;
      }
    }
    &:after {
      content: ' ';
      clear: both;
      display: inline-block;
    }
  }
}
</style>
